<%--
  Created by IntelliJ IDEA.
  User: wj
  Date: 2018-11-16
  Time: 14:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/static/hplus/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/hplus/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/hplus/css/font-awesome.min93e3.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/hplus/css/animate.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/hplus/css/style.min862f.css" rel="stylesheet">

    <script src="${pageContext.request.contextPath}/static/hplus/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/hplus/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <script>

        //得到查询的参数
        function queryParams (params) {

        };

        $(function () {
            $("#gongtb").bootstrapTable({
                url:'${pageContext.request.contextPath}/info1/querySearch',
                //设置每页多少条数据
                pageSize:2,
                pageList:[2,4,8,16],
                height:300,
                pageNumber:1,
                //启用分页，但是默认情况下，是客户端分页的
                pagination:true,
                //启用服务器端分页
                sidePagination:'server',
                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                        gname:$("#gname").val()
                    };
                    return temp;
                },
                columns:[
                    {
                        field:'gid',
                        title:'供应商ID'
                    },
                    {
                        field:'gname',
                        title:'供应商姓名'
                    },
                    {
                        field:'gming',
                        title:'供应商联系人'
                    },

                    {
                        field:'gphone',
                        title:'供应商电话'
                    },
                    {
                        field:'gaddress',
                        title:'供应商地址'
                    },
                    {
                        field:'gbeizhu',
                        title:'备注'
                    },

                    {
                        title:'操作',
                        formatter:function(value,row,index){
                            return "<button class='btn btn-info' onclick='javascript:del("+row.gid+")'>删除</button>"+
                                "&nbsp;&nbsp;&nbsp;<button class=' btn btn-danger' onclick='javascript:ud("+row.gid+")'>修改</button>"
                        }
                    },
                ]
            }) ;
        }) ;

        function searcha() {
            //返回表格的 Options。
            var opts = $("#gongtb").bootstrapTable("getOptions") ;
            var limit = opts.pageSize ;
            var offset = (opts.pageNumber-1) * limit;
            var gname = $("#gname").val() ;
            $.post("${pageContext.request.contextPath}/info1/querySearch",{'gname':gname,'limit':limit,'offset':offset},function (data) {
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                $("#gongtb").bootstrapTable('load',data) ;
            })
        }


        var gid;
        function del(gids){
            gid=gids;
            $("#sc").modal('show');
        }
        function dodelete(){
            $.post('${pageContext.request.contextPath}/info1/shanchu',{gid:gid},function(data){
                if(data!=null){
                    searcha();
                    $("#sc").modal('hide');
                }
            })
        }


        function add(){
            $("#Div3").modal('show');
        }

        function doadd(){
            var gname=$("[name=gname]").val();
            var gming=$("[name=gming]").val();
            var gphone=$("[name=gphone]").val();
            var gaddress=$("[name=gaddress]").val();
            var gbeizhu=$("[name=gbeizhu]").val();
            $.post('${pageContext.request.contextPath}/info1/inst',{gid:gid,gname:gname,gming:gming,gphone:gphone,gaddress:gaddress,gbeizhu:gbeizhu},function(data){
                if(data!= null){
                    searcha();
                    $("#Div3").modal('hide');
                }else{
                    alert("增加失败！");
                }
            })
        }

        var gid=0;
        function ud(id){
            gid=id;
            $("#Div4").modal('show');
            //发送post请求
            $.post('${pageContext.request.contextPath}/info1/queryById',{gid:gid},function(data){
                //给表单赋值
                $("[name=gnameG]").val(data.gname);
                $("[name=gmingG]").val(data.gming);
                $("[name=gphoneG]").val(data.gphone);
                $("[name=gaddressG]").val(data.gaddress);
                $("[name=gbeizhuG]").val(data.gbeizhu);
            })


        };

        function doupd(){
            var gnameG=$("[name=gnameG]").val();
            var gmingG=$("[name=gmingG]").val();
            var gphoneG=$("[name=gphoneG]").val();
            var gaddressG=$("[name=gaddressG]").val();
            var gbeizhuG=$("[name=gbeizhuG]").val();
            $.post('${pageContext.request.contextPath}/info1/xg',{gid:gid,gname:gnameG,gming:gmingG,gphone:gphoneG,gaddress:gaddressG,gbeizhu:gbeizhuG},function(data){
                if(data!= null){
                    searcha();
                    $("#Div4").modal('hide');
                }else{
                    alert("修改失败！");
                }
            })

        }

    </script>

</head>
<body>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">供应商列表</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-sm-6">
                <button onclick="add()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;增加</button>
            </div>
            <div class="col-sm-6">
                <form  class="form-inline pull-right">
                    <input id="gname" type="text" class="form-control">
                    <button class="btn btn-primary" onclick="searcha()" type="button"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;搜索</button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <table id="gongtb"></table>
            </div>
        </div>

    </div>
</div>

<!---删除模态框-->
<div class="modal fade" id="sc">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modelTitleId">提示信息</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12" id="addrole" style="height: 100px">
                        <p>确认删除客户信息吗？</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary"onclick="dodelete()">删除</button>
            </div>
        </div>
    </div>
</div>


<%--增加模态框--%>
<div class="modal fade" id="Div3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">增加供应商信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" method="post" >
                    <div class="form-group">
                        <label for="titile" class="col-sm-2 control-label">供应商名称:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="gname" class="form-control" id="title1" placeholder="请输入供应商名称">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">供应商联系人:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="gming" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="请输入供应商联系人">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">供应商电话:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="gphone" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="请输入供应商电话">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">供应商地址:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="gaddress"  class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="请输入供应商地址">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">供应商备注:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="gbeizhu"  class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="请输入供应商备注">
                        </div>
                    </div>


                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary"  onclick="doadd()">增加</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<%--修改模态框--%>
<div class="modal fade" id="Div4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">修改供应商信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" method="post" >
                    <div class="form-group">
                        <label for="titile" class="col-sm-2 control-label">供应商名称:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="gnameG" class="form-control" id="title" placeholder="请输入供应商名称">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">供应商联系人:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="gmingG" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="请输入供应商联系人">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">供应商电话:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="gphoneG" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="请输入供应商电话">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">供应商地址:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="gaddressG"  class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="请输入供应商地址">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">供应商备注:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="gbeizhuG"  class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="请输入供应商备注">
                        </div>
                    </div>


                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary"  onclick="doupd()">修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</body>
</html>
